<template>
  <div>
    <div style="text-align: right; padding: 10px">
      <Button icon="ios-print-outline" @click="clickPrint">打印</Button>
    </div>
    <Modal v-model="showDetail" title="打印详情" :width="modelWidth" :mask-closable="false">
      <Row>
        <i-col class="printCol" span="6" style="width: 240px">
          <div>
            <Menu class="printCol" ref="side_menu" theme="light" :active-name="activeName" @on-select="onSelect">
              <MenuItem v-for="(item, index) in menus" :name="index" :key="index">
                  <Icon class="menu-item-icon" />
                  <span>{{item.id}}</span>
              </MenuItem>
            </Menu>
          </div>
        </i-col>
        <i-col class="printCol" span="18" style="margin-left: 10px; border:1px solid #F2F2F2">
          <div style="width: 100%">
            <form ref="printForm" :action="printUrl" target="printIframe" method="post">
              <input type="hidden" v-for="(v, k) in formData" :value="v" :name="k" :key="k"/>
            </form>
            <iframe class="printIframe" ref='print' name="printIframe" :load="onLoad" style="width: 100%; border: none" :title="flowDiagram" src=""></iframe>
          </div>
        </i-col>
      </Row>
      <div slot="footer">
        <Button @click="showDetail=false">关闭</Button>
      </div>
    </Modal>
  </div>
  
</template>

<script>
export default {
  name: 'print-form',
  props: {
    item: Object,
    models: Object,
    datas: Object,
    taskId: String
  },
  data() {
    return {
      flowDiagram: "打印表单",
      printFomrs: null,
      printUrl: '',
      formData: {},
      menus: [],
      activeName: 0,
      showDetail: false
    }
  },
  computed: {
    modelWidth () {
      let width = document.documentElement.clientWidth - 300
      return width
    }
  },
  methods: {
    clickPrint() {
      this.initClick()
      this.showDetail = true
    },
    onLoad () {
      // const iframe = this.$refs.print
    },
    initData(index) {
      let key = this.datas.key
      this.menus = JSON.parse(this.models.printConfig)
      if(!this.menus || this.menus.length === 0){
        return
      }
      let config = this.menus[index]
      this.formData = {
        dataKey: JSON.stringify(key),
        formKey: JSON.stringify({name: config.name ,title: config.name, sign: config.sign, time: config.time}),
        appName: this.models.appName.name,
        appVersion: this.models.activeVersion,
        taskId: this.taskId
      }
      this.$nextTick(() => {
        this.$refs.side_menu.updateActiveName()
        this.$refs.printForm.submit();
      })
    },
    onSelect(name) {
      this.initData(name)
    },
    initHeight() {
      var wrapperHeight = document.documentElement.clientHeight - 78 -170;
      $(".printCol").height(wrapperHeight);
      $(".printIframe").height(wrapperHeight);
    },
    initClick() {
      let url = "/sys/eetablemanage/showPrintForm.do"
      this.printUrl = window.contextPath + url
      this.initData(0)
    }
  },
  created() {
    
  },
  mounted () {
    const iframe = this.$refs.print
    // 处理兼容行问题
    iframe.onload = this.onLoad.bind(this)
    this.initHeight()
  },
  beforeDestroy () {
    const iframe = this.$refs.print
    iframe.onload = null
  }
}
</script>

<style lang="less" scoped>
  .ivu-menu-light {
    background: #F7F8FC !important;
  }
  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
    color: #fff !important;
    background: #6276E7 !important;
    z-index: 2;
  }
  .ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
    padding: 10px 24px !important;
  }
</style>
